<template>
    <el-dialog
        v-model="deleteApiDialogVisible"
        :title="header"
        width="20%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        {{body}}
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="deleteLoading" @click="submitDialog()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="ApiDeleteDialog" lang="ts">
import {ElNotification} from "element-plus";
import {apiRouteInfoQuery, deleteApiRouteInfoQuery} from "@/request/api";
import {computed, defineProps, ref} from "vue";
import {useApiStore} from "@/stores/apiManage/api";

let props = defineProps(['header', 'body', 'deleteData']);

let header = computed(() => {return props['header']})
let body = computed(() => {return props['body']})
let deleteData = computed(() => {return props['deleteData']})

let deleteLoading = ref(false);
let deleteApiDialogVisible = computed(() => {return useApiStore().deleteApiDialog});
let apiSearchData = computed(() => {return useApiStore().apiSearchData});

function cancelDialog() {
    useApiStore().resetDeleteApiDialog(false);
}

function submitDialog() {
    deleteLoading.value = true
    deleteApiRouteInfoQuery(deleteData.value).then(res => {
        if (res["code"] === '200') {
            ElNotification({
                title: 'Success',
                message: res["message"],
                type: 'success'
            });
            apiRouteInfoQuery(apiSearchData.value).then(res => {
                useApiStore().resetRouterDataList(res.data);
            })
            useApiStore().resetDeleteApiDialog(false);
            deleteLoading.value = false
        }
    }).catch(res => {
        deleteLoading.value = false
    })
}
</script>

<style scoped>

</style>